<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<meta name="baidu-site-verification" content="oF1sFvESVA" />
		<meta name="baidu_union_verify" content="bda7674d0ccf3504162798d150953709">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" th:href="@{/libs/bootstrap/bootstrap.min.css}"/>
		<link rel="stylesheet" th:href="@{/libs/swiper/css/swiper.min.css}"/>
		<link rel="stylesheet" th:href="@{/libs/zplayer/css/zplayer.min.css}"/>
		<link rel="stylesheet" th:href="@{/libs/font-icon/icon.css}"/>
		<link rel="stylesheet" th:href="@{/libs/theme/pblog/css/web-common.css}" />
		<link rel="stylesheet" th:href="@{/libs/theme/pblog/css/web-blog.css}" />
		<link rel="stylesheet" th:href="@{/libs/adminlte/css/AdminLTE.min.css}"/>
		<script th:inline="javascript">var ctx = [[@{/}]];</script>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/libs/bootstrap/bootstrap.min.js}"></script>
		<script th:src="@{/libs/swiper/js/swiper.min.js}"></script>
		<script th:src="@{/js/hc-sticky.js}" ></script>
		<script th:src="@{/libs/zplayer/js/zplayer.min.js}"></script>
		<script th:src="@{/libs/theme/pblog/js/pb-blog.js}"></script>
		<script th:src="@{/js/core.js}"></script>
		<script th:src="@{/libs/layer/layer.js}"></script>
		<script th:src="@{/libs/iCheck/icheck.min.js}"></script>
		<script th:src="@{/libs/validate/validate.js}"></script>
	</head>
	<body>
		<header id="header">
			<div th:replace="home/fragments/navbar :: navbar"></div>
		</header>
		<div class="pb-container pb-content">
			<div class="pb-main">
				<div class="no-article-content" th:if="${#lists.isEmpty(addressList)}">
					收货地址为空，请添加
				</div>
				<div th:each="item,temp : ${addressList}" class="blogs">
				  <h3 class="blogtitle"><a th:text="${item.name}" ></a></h3>
					<span th:text="${item.phone}"></span>
			      <p  th:text="${item.description}" class="blogtext"></p>
					<button type="button"  th:attr="id=${item.id},name=${item.name},phone=${item.phone},description=${item.description}"  data-toggle="modal" data-target="#addressModal" class="btn btn-info editAddress">编辑</button>
					<button type="button"  th:attr="id=${item.id},name=${item.name},phone=${item.phone},description=${item.description}" class="btn btn-danger deleteAddress">删除</button>
			    </div>
				<div th:replace="home/fragments/pagebar :: pagebar"></div>

				<button type="button" style="display: inline-block" id="addAddress"  data-toggle="modal" data-target="#addressModal" class="btn btn-default">新增地址</button>
			</div>
			<!--<div th:replace="home/fragments/sidebar :: sidebar"></div>-->
		</div>
		<div class="return_top"><a class=" fa fa-arrow-up"></a></div>
		<div id="addressModal" class="modal fade" tabindex="-1" role="dialog" style="top: 50px!important;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">新增收货地址</h4>
					</div>
					<div class="modal-body">
						<div>
							<form class="form-horizontal" id="addAddressForm">
								<div class="box-body">
									<div class="form-group">
										<input type="hidden"  id="id" name="id">
										<label for="name" class="col-sm-3 control-label">联系人 :</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="name" id="name" require="必填项"  placeholder="">
										</div>
									</div>
									<div class="form-group">
										<label for="phone" class="col-sm-3 control-label">手机号 :</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="phone" id="phone"  require="必填项"  placeholder="">
										</div>
									</div>
									<div class="form-group">
										<label for="description" class="col-sm-3 control-label">详细地址 :</label>
										<div class="col-sm-8">
											<textarea class="form-control"  name="description" id="description" require="必填项" placeholder="">

											</textarea>
										</div>
									</div>

								</div>
								<!-- /.box-body -->
								<div class="box-footer">
									<div class="pull-right">
										<button type="button" id="saveAddress" class="btn btn-info">确定</button>
										<button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
									</div>
								</div>
								<!-- /.box-footer -->
							</form>
						</div>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>
		<script type="text/javascript">

			$("#addAddress").on('click', function () {
				$("#addAddressForm")[0].reset();
				Core.clearError("#addAddressForm");
			})


			$("#saveAddress").on('click', function () {
				if(doValidForm(passwordForm)){
					Core.postAjax("/address/save",$("#addAddressForm").serialize(),function(data){
						if(data.status==200){
							$("#addAddressModal").modal("hide");
							layer.msg('编辑地址成功!');
							window.location.href = (ctx + "/address").replace('//', '/');
						}else{
							layer.msg(data.msg);
						}
					})
				}
			})


			$(".editAddress").on('click', function () {
				$("#addAddressForm")[0].reset();
				Core.clearError("#addAddressForm");
				var id = $(this).attr("id")
				var name = $(this).attr("name")
				var phone = $(this).attr("phone")
				var description = $(this).attr("description")
				$("#id").val(id)
				$("#name").val(name)
				$("#phone").val(phone)
				$("#description").val(description)
			})

			$("#addAddressForm").keyup(function(event){
				if(event.keyCode ==13){
					$("#saveAddress").click();
				}
			});

			$(".deleteAddress").on('click',function () {
				var id = $(this).attr("id")
				var data = {"id":id}
				Core.postAjax("/address/delete",data,function(data){
					if(data.status==200){
						layer.msg(data.msg);
						window.location.href = (ctx + "/address").replace('//', '/');
					}else{
						layer.msg(data.msg);
					}
				})
			})
		</script>
	</body>

</html>